<template>
  <div>
    <el-form
      class="form-container"
      :model="postForm"
      v-loading="formLoading"
      ref="postForm"
      label-width="220px"
      label-position="right"
    >
      <el-form-item label="推广图片：">
        <!-- <el-upload  style="float:left"
          class="avatar-uploader"
          name="avatar"
          :action="imageUploadUrl"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess">
          <img v-if="postForm.promotionImg" :src="postForm.promotionImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>-->

        <el-upload
          class="upload-demo"
          name="avatar"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="imageUploadUrl"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
        >
          <!-- <img v-if="postForm.promotionImg" :src="postForm.promotionImg" class="avatar"> -->
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过100kb</div>
        </el-upload>
        <!-- <el-button type="primary" style="float:left;margin-left:30px;" @click="linkToPreview">预览二维码</el-button> -->
      </el-form-item>
      <el-form-item label="从我要推广跳转到升级会员页：">
        <el-checkbox v-model="postForm.isPromotion2PayPage" :true-label="1" :false-label="0"></el-checkbox>
      </el-form-item>
      <el-form-item v-if="permission == 3" style="padding: 10px 0">
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getPromoteSetting, savePromoteSetting } from "@/api/systemManage";
import { shopManage_systemManage } from "@/utils/permission";
const postForm = {
  promotionImg: [],
  isPromotion2PayPage: 1
};

export default {
  name: "spread",
  data() {
    return {
      permission: 3,
      postForm: Object.assign({}, postForm),
      imageUploadUrl: process.env.BASE_API + "/common/companies/imageUpload",
      formLoading: false,
      fileList: [],
      btnLoading: false
    };
  },
  created() {
    this.getModelPermission();
    this.initData();
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews;
    }
  },
  methods: {
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      for (let i = 0; i < this.fileList.length; i++) {
        const element = this.fileList[i].uid;
        if (element == file.uid) {
          this.fileList.splice(i, 1);
        }
      }
      for (let j = 0; j < this.postForm.promotionImg.length; j++) {
        const element = this.postForm.promotionImg[j];
        if (element == file.url) {
          this.postForm.promotionImg.splice(j, 1);
        }
      }
      console.log(this.postForm.promotionImg);
    },
    getModelPermission() {
      this.permission = shopManage_systemManage();
    },
    initData() {
      this.fileList = [];
      getPromoteSetting()
        .then(res => {
          
          if (res.data.data.promotionImg) {
            this.postForm = res.data.data;

            for (let i = 0; i < res.data.data.promotionImg.length; i++) {
              const element = res.data.data.promotionImg[i];
              this.fileList.push({ name: "推广图片" + (i + 1), url: element });
            }
          } else {
            this.postForm = {
              promotionImg: [],
              isPromotion2PayPage: 1
            };
          }
        })
        .catch(err => {
        });
    },
    handleAvatarSuccess(res, file) {
      if (res.statusCode == 200) {
        this.postForm.promotionImg.push(res.data.imageUrl);
        console.log(this.fileList);
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 1MB");
      }
      return isJPG && isLt2M;
    },
    linkToPreview() {
      this.$router.push({ path: `/shopManage/previewQrcode` });
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.btnLoading = true;
          this.formLoading = true;
          savePromoteSetting(this.postForm)
            .then(res => {
              this.btnLoading = false;
              this.formLoading = false;
              this.$message.success("保存成功");
            })
            .catch(err => {
              this.btnLoading = false;
              this.formLoading = false;
              console.log(err);
            });
        } else {
          this.btnLoading = false;
          this.formLoading = false;
          console.log("error submit!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
p {
  margin: 0;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 318px;
  height: 522px;
  line-height: 522px;
  text-align: center;
}
.avatar {
  width: 318px;
  height: 522px;
  display: block;
}
</style>
